<template>
  <div>
    <div class="container">
      <div class="container-img">
        <img ref="myImg" :src="currentImg" />
      </div>
      <div class="preview" alt="" />
    </div>
    <input @change="changeFile" type="file" />
    <button @click="reset">重置</button>
    <button @click="rotateRetroGrade">逆向旋转</button>
    <button @click="rotateForward">正向旋转</button>
    <button @click="scaleX">水平镜像</button>
    <button @click="scaleY">垂直镜像</button>
    <button @click="scaleMax">放大</button>
    <button @click="scaleMin">缩小</button>
  </div>
</template>

<script>
import Cropper from "cropperjs";
import "cropperjs/dist/cropper.css";

export default {
  data() {
    return {
      scaleXValue: 1,
      scaleYValue: 1,
      currentImg: require("./assets/logo.png"),
    };
  },
  mounted() {
    // ①cropperjs基础用法：
    // new Cropper(element, options)
    // new Cropper(this.$refs.myImg)

    // ②实现预览图片的效果：
    // 只需要option中的一个属性preview即可, 它是一个"选择器",
    // 你想把裁剪的图片实时显示在那个标签上, 就设置该选择器就可以了：
    // new Cropper(this.$refs.myImg, {
    //   preview: ".preview",
    // });

    // ③使用cropper实例的API：
    this.myCropper = new Cropper(this.$refs.myImg, {
      preview: ".preview",
    });
  },
  methods: {
    // 重置
    reset() {
      this.myCropper?.reset();
    },
    // 逆向旋转 每次45度
    rotateRetroGrade() {
      this.myCropper?.rotate(-45);
    },
    // 正向旋转 每次45度
    rotateForward() {
      this.myCropper?.rotate(45);
    },
    // 水平翻转
    scaleX() {
      this.scaleXValue = this.scaleXValue === 1 ? -1 : 1;
      this.myCropper?.scaleX(this.scaleXValue);
    },
    // 垂直翻转
    scaleY() {
      this.scaleYValue = this.scaleYValue === 1 ? -1 : 1;
      this.myCropper?.scaleY(this.scaleYValue);
    },
    // 放大
    scaleMax() {
      this.myCropper?.zoom(0.1); // 每次放大0.1倍
    },
    scaleMin() {
      this.myCropper?.zoom(-0.1); // 每次缩小0.1倍
    },
    // 细节1：change事件 →触发获取到对应file文件信息...
    changeFile(params) {
      // console.log(params)

      // ①如果文件存在(files)
      if (params.target.files) {
        // ②则根据原图片是否存在, 进行销毁
        this.myCropper?.destroy()

        // ③创建一个 FileReader 的实例
        // 细节2：将File对象转化成base64格式...
        const fr = new FileReader()

        // ④当读取操作成功完成时触发(onloadend事件)
        fr.onloadend = () => {
          // ⑤将当前转化的base64格式图片, 覆盖当前图片：
          this.currentImg = fr.result

          // ⑥由于图片更新为异步的, 因此先等src的地址真实变化之后，再处理..
          this.$nextTick(() => {
            this.myCropper = new Cropper(this.$refs.myImg, {
              preview: ".preview",
            })
          })
        }

        // ⑦通过如下代码, 赋值给图片的src属性：
        fr.readAsDataURL(params.target.files[0])
      }
    },
    getBase64() {
      const canvas = this.myCropper?.getCroppedCanvas();
      const base64 = canvas.toDataURL("image/png"); // 转化成base64的png图片格式
      console.log(base64);
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  display: flex;
  justify-content: space-evenly;
}

.container-img {
  flex: 0.5;
}

img {
  display: block;
  max-width: 100%;
}

.preview {
  width: 100px;
  height: 100px;
  overflow: hidden;
  border: 1px solid #ccc;
}
</style>
